<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易信息分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        danger: '#F87272',
                        warning: '#FBBD23',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .gradient-bg {
                background: linear-gradient(135deg, #165DFF 0%, #0A2463 100%);
            }
            .text-balance {
                text-wrap: balance;
            }
            .favorite-active {
                color: #FFD700;
                animation: pulse 0.5s ease-in-out;
            }
            .api-connected {
                border-color: #36D399;
                box-shadow: 0 0 0 2px rgba(54, 211, 153, 0.2);
            }
            .slide-up {
                animation: slideUp 0.3s ease-out forwards;
            }
            @keyframes slideUp {
                from { transform: translateY(100%); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            @keyframes pulse {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.3); }
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="gradient-bg text-white shadow-md z-50 sticky top-0">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-line-chart text-2xl"></i>
                <h1 class="text-xl font-bold">交易信息分析</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="refresh-btn" class="p-2 rounded-full hover:bg-white/20 transition-all">
                    <i class="fa fa-refresh"></i>
                </button>
                <button id="settings-btn" class="p-2 rounded-full hover:bg-white/20 transition-all">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- API配置模态框 -->
    <div id="api-config-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4 transform transition-all scale-95 opacity-0" id="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">交易平台API配置</h3>
                <button id="close-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <form id="api-config-form">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">平台名称</label>
                        <select id="api-platform" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="demo">Demo平台</option>
                            <option value="xueqiu">雪球API</option>
                            <option value="eastmoney">东方财富API</option>
                            <option value="custom">自定义API</option>
                        </select>
                    </div>
                    
                    <div id="api-key-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
                        <input type="text" id="api-key" placeholder="请输入API Key" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                    
                    <div id="api-secret-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">API Secret</label>
                        <input type="password" id="api-secret" placeholder="请输入API Secret" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                    
                    <div id="api-url-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">API URL</label>
                        <input type="text" id="api-url" placeholder="请输入API基础URL" value="https://api.example.com" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                </div>
                
                <div class="mt-6 flex justify-end space-x-3">
                    <button type="button" id="cancel-config" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                        保存配置
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 交易操作模态框 -->
    <div id="trade-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4 transform transition-all scale-95 opacity-0" id="trade-modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold" id="trade-stock-name">交易操作</h3>
                <button id="close-trade-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <form id="trade-form">
                <input type="hidden" id="trade-stock-code">
                
                <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <button type="button" class="trade-type-btn px-4 py-2 bg-primary text-white rounded-lg" data-type="buy">买入</button>
                        <button type="button" class="trade-type-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-type="sell">卖出</button>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">交易价格</label>
                        <input type="number" id="trade-price" placeholder="请输入交易价格" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">交易数量</label>
                        <input type="number" id="trade-amount" placeholder="请输入交易数量" min="1" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">交易类型</label>
                        <select id="trade-method" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option value="limit">限价交易</option>
                            <option value="market">市价交易</option>
                            <option value="stop">止损交易</option>
                        </select>
                    </div>
                </div>
                
                <div class="mt-6">
                    <button type="submit" id="submit-trade" class="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                        <i class="fa fa-check mr-2"></i> 确认买入
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- API连接状态 -->
        <div id="api-status" class="mb-4 p-3 rounded-lg flex items-center justify-between bg-white card-shadow">
            <div class="flex items-center">
                <div id="api-status-icon" class="w-3 h-3 rounded-full bg-gray-300 mr-2"></div>
                <span id="api-status-text">未连接交易平台</span>
            </div>
            <button id="connect-api" class="text-primary text-sm hover:underline">
                <i class="fa fa-plug mr-1"></i> 连接平台
            </button>
        </div>

        <!-- 筛选和搜索 -->
        <div class="mb-6 bg-white rounded-xl p-4 card-shadow">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-500">排序方式:</span>
                    <select id="sort-select" class="bg-gray-100 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="90-concentration">90%筹码集中度</option>
                        <option value="70-concentration">70%筹码集中度</option>
                        <option value="price-diff">价格偏离度</option>
                    </select>
                </div>
                <div class="relative">
                    <input type="text" id="search-input" placeholder="搜索代码/名称..." 
                           class="w-full md:w-64 pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 自选股标签页 -->
        <div class="mb-6 bg-white rounded-xl overflow-hidden card-shadow">
            <div class="flex border-b border-gray-100">
                <button id="all-stocks-tab" class="flex-1 py-3 font-medium text-primary border-b-2 border-primary">全部</button>
                <button id="favorites-tab" class="flex-1 py-3 font-medium text-gray-500">自选</button>
            </div>
            <div id="favorites-empty" class="py-8 text-center text-gray-400 hidden">
                <i class="fa fa-star-o text-4xl mb-3"></i>
                <p>暂无自选股票</p>
                <p class="text-xs mt-2">点击股票卡片上的⭐添加自选</p>
            </div>
            <div id="favorites-list" class="p-4 space-y-3 max-h-[200px] overflow-y-auto scrollbar-hide">
                <!-- 自选股将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 股票列表 -->
        <div class="space-y-4 mb-8">
            <div class="flex justify-between items-center mb-2">
                <h2 class="text-lg font-semibold">股票列表</h2>
                <span id="stock-count" class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-full">0 只股票</span>
            </div>
            
            <div id="stock-list" class="space-y-3 max-h-[calc(100vh-500px)] overflow-y-auto scrollbar-hide">
                <!-- 股票项将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 详情卡片 -->
        <div id="detail-card" class="bg-white rounded-xl overflow-hidden card-shadow mb-8 opacity-0 transition-opacity duration-300">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <div>
                    <h3 id="detail-name" class="text-xl font-bold"></h3>
                    <p id="detail-code" class="text-sm text-gray-500"></p>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="text-right">
                        <p id="detail-price" class="text-2xl font-bold"></p>
                        <p id="detail-change" class="text-sm"></p>
                    </div>
                    <button id="detail-favorite-btn" class="p-2 rounded-full hover:bg-gray-100 transition-all">
                        <i class="fa fa-star-o text-xl"></i>
                    </button>
                </div>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border-b border-gray-100">
                <div class="text-center">
                    <p class="text-xs text-gray-500">120日均价</p>
                    <p id="detail-avg-price" class="font-semibold"></p>
                </div>
                <div class="text-center">
                    <p class="text-xs text-gray-500">120日最低</p>
                    <p id="detail-min-price" class="font-semibold"></p>
                </div>
                <div class="text-center">
                    <p class="text-xs text-gray-500">90%筹码</p>
                    <p id="detail-90-concentration" class="font-semibold"></p>
                </div>
                <div class="text-center">
                    <p class="text-xs text-gray-500">70%筹码</p>
                    <p id="detail-70-concentration" class="font-semibold"></p>
                </div>
            </div>
            
            <div class="p-4">
                <div class="flex justify-between items-center mb-4">
                    <h4 class="font-medium">120日价格走势</h4>
                    <div class="flex space-x-2">
                        <button class="period-btn px-3 py-1 text-xs rounded-full bg-primary/10 text-primary">日K</button>
                        <button class="period-btn px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">周K</button>
                        <button class="period-btn px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">月K</button>
                    </div>
                </div>
                <div class="h-64">
                    <canvas id="price-chart"></canvas>
                </div>
            </div>
            
            <div class="p-4 border-t border-gray-100">
                <h4 class="font-medium mb-4">筹码分布图</h4>
                <div class="h-64">
                    <canvas id="chip-chart"></canvas>
                </div>
            </div>
            
            <!-- 交易操作按钮 -->
            <div class="p-4 border-t border-gray-100">
                <div class="grid grid-cols-2 gap-4">
                    <button id="buy-btn" class="py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-colors flex items-center justify-center">
                        <i class="fa fa-shopping-cart mr-2"></i> 买入
                    </button>
                    <button id="sell-btn" class="py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors flex items-center justify-center">
                        <i class="fa fa-exchange mr-2"></i> 卖出
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航 -->
    <footer class="bg-white border-t border-gray-200 py-2 px-4 sticky bottom-0">
        <div class="flex justify-around">
            <button class="flex flex-col items-center text-primary">
                <i class="fa fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </button>
            <button class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-compass text-xl mb-1"></i>
                <span class="text-xs">发现</span>
            </button>
            <button class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-star-o text-xl mb-1"></i>
                <span class="text-xs">收藏</span>
            </button>
            <button class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-user-o text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </button>
        </div>
    </footer>

    <!-- 交易结果提示 -->
    <div id="trade-toast" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-dark text-white px-4 py-3 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 flex items-center">
        <i id="toast-icon" class="fa fa-check-circle mr-2"></i>
        <span id="toast-message">交易成功</span>
    </div>

    <script>
        // 模拟数据
        const mockStocks = [
            {
                code: "000001",
                name: "平安银行",
                price: 15.62,
                change: 0.32,
                changePercent: 2.09,
                avgPrice120: 14.87,
                minPrice120: 13.25,
                concentration90: 0.15,
                concentration70: 0.08,
                priceHistory: generateRandomPrices(120, 13, 17),
                chipDistribution: generateChipDistribution(),
                favorite: false
            },
            {
                code: "000002",
                name: "万科A",
                price: 24.85,
                change: -0.45,
                changePercent: -1.78,
                avgPrice120: 26.31,
                minPrice120: 23.58,
                concentration90: 0.18,
                concentration70: 0.10,
                priceHistory: generateRandomPrices(120, 23, 28),
                chipDistribution: generateChipDistribution(),
                favorite: true
            },
            {
                code: "000004",
                name: "国华网安",
                price: 10.36,
                change: 0.52,
                changePercent: 5.27,
                avgPrice120: 9.85,
                minPrice120: 7.62,
                concentration90: 0.12,
                concentration70: 0.05,
                priceHistory: generateRandomPrices(120, 7, 11),
                chipDistribution: generateChipDistribution(),
                favorite: false
            },
            {
                code: "000005",
                name: "世纪星源",
                price: 3.82,
                change: -0.05,
                changePercent: -1.29,
                avgPrice120: 3.65,
                minPrice120: 3.12,
                concentration90: 0.22,
                concentration70: 0.13,
                priceHistory: generateRandomPrices(120, 3, 4),
                chipDistribution: generateChipDistribution(),
                favorite: true
            },
            {
                code: "000006",
                name: "深振业A",
                price: 5.73,
                change: 0.12,
                changePercent: 2.14,
                avgPrice120: 5.58,
                minPrice120: 4.87,
                concentration90: 0.16,
                concentration70: 0.09,
                priceHistory: generateRandomPrices(120, 4.5, 6),
                chipDistribution: generateChipDistribution(),
                favorite: false
            }
        ];

        // API配置
        let apiConfig = {
            platform: 'demo',
            key: '',
            secret: '',
            url: 'https://api.example.com',
            connected: false
        };

        // 当前选中的股票
        let selectedStock = null;
        // 当前交易类型
        let currentTradeType = 'buy';

        // 生成随机价格数据
        function generateRandomPrices(days, min, max) {
            const prices = [];
            let price = min + (max - min) * Math.random();
            
            for (let i = 0; i < days; i++) {
                const change = (Math.random() - 0.5) * 0.1 * (max - min);
                price = Math.max(min, Math.min(max, price + change));
                prices.push(price.toFixed(2));
            }
            
            return prices;
        }

        // 生成筹码分布数据
        function generateChipDistribution() {
            const distribution = [];
            const center = 0.5 + (Math.random() - 0.5) * 0.2;
            const spread = 0.2 + Math.random() * 0.3;
            
            for (let i = 0; i <= 100; i++) {
                const x = i / 100;
                const value = Math.exp(-Math.pow(x - center, 2) / (2 * Math.pow(spread, 2)));
                distribution.push(value * 100);
            }
            
            return distribution;
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 加载API配置
            loadApiConfig();
            updateApiStatus();
            
            renderStockList(mockStocks);
            document.getElementById('stock-count').textContent = `${mockStocks.length} 只股票`;
            
            // 刷新按钮事件
            document.getElementById('refresh-btn').addEventListener('click', function() {
                this.classList.add('animate-spin');
                fetchStockData().then(() => {
                    this.classList.remove('animate-spin');
                    renderStockList(mockStocks);
                    showToast('数据刷新成功', 'success');
                }).catch(() => {
                    this.classList.remove('animate-spin');
                    showToast('数据刷新失败', 'error');
                });
            });
            
            // 排序选择事件
            document.getElementById('sort-select').addEventListener('change', function() {
                sortStocks(this.value);
            });
            
            // 搜索事件
            document.getElementById('search-input').addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const filteredStocks = mockStocks.filter(stock => 
                    stock.code.toLowerCase().includes(searchTerm) || 
                    stock.name.toLowerCase().includes(searchTerm)
                );
                renderStockList(filteredStocks);
            });
            
            // 周期按钮事件
            document.querySelectorAll('.period-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.period-btn').forEach(b => {
                        b.classList.remove('bg-primary/10', 'text-primary');
                        b.classList.add('bg-gray-100', 'text-gray-500');
                    });
                    this.classList.remove('bg-gray-100', 'text-gray-500');
                    this.classList.add('bg-primary/10', 'text-primary');
                });
            });
            
            // 自选股标签页切换
            document.getElementById('all-stocks-tab').addEventListener('click', function() {
                showAllStocks();
            });
            
            document.getElementById('favorites-tab').addEventListener('click', function() {
                showFavorites();
            });
            
            // API配置按钮事件
            document.getElementById('connect-api').addEventListener('click', function() {
                openApiConfigModal();
            });
            
            document.getElementById('settings-btn').addEventListener('click', function() {
                openApiConfigModal();
            });
            
            // 关闭API配置模态框
            document.getElementById('close-modal').addEventListener('click', function() {
                closeApiConfigModal();
            });
            
            document.getElementById('cancel-config').addEventListener('click', function() {
                closeApiConfigModal();
            });
            
            // 保存API配置
            document.getElementById('api-config-form').addEventListener('submit', function(e) {
                e.preventDefault();
                saveApiConfig();
                closeApiConfigModal();
                updateApiStatus();
                showToast('API配置已保存', 'success');
            });
            
            // 交易操作按钮事件
            document.getElementById('buy-btn').addEventListener('click', function() {
                if (!apiConfig.connected) {
                    showToast('请先连接交易平台', 'warning');
                    openApiConfigModal();
                    return;
                }
                
                if (!selectedStock) return;
                
                openTradeModal('buy');
            });
            
            document.getElementById('sell-btn').addEventListener('click', function() {
                if (!apiConfig.connected) {
                    showToast('请先连接交易平台', 'warning');
                    openApiConfigModal();
                    return;
                }
                
                if (!selectedStock) return;
                
                openTradeModal('sell');
            });
            
            // 交易类型切换
            document.querySelectorAll('.trade-type-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    currentTradeType = this.dataset.type;
                    
                    document.querySelectorAll('.trade-type-btn').forEach(b => {
                        b.classList.remove('bg-primary', 'text-white');
                        b.classList.add('bg-gray-200', 'text-gray-700');
                    });
                    
                    this.classList.remove('bg-gray-200', 'text-gray-700');
                    this.classList.add('bg-primary', 'text-white');
                    
                    // 更新按钮文本
                    const submitBtn = document.getElementById('submit-trade');
                    submitBtn.innerHTML = currentTradeType === 'buy' 
                        ? '<i class="fa fa-shopping-cart mr-2"></i> 确认买入' 
                        : '<i class="fa fa-exchange mr-2"></i> 确认卖出';
                });
            });
            
            // 提交交易
            document.getElementById('trade-form').addEventListener('submit', function(e) {
                e.preventDefault();
                submitTrade();
            });
            
            // 关闭交易模态框
            document.getElementById('close-trade-modal').addEventListener('click', function() {
                closeTradeModal();
            });
            
            // 初始化显示全部股票
            showAllStocks();
            
            // 监听存储变化事件
            window.addEventListener('storage', function(e) {
                if (e.key === 'favorites') {
                    updateFavorites();
                }
            });
        });

        // 从API获取股票数据
        async function fetchStockData() {
            // 如果没有连接API，使用模拟数据
            if (!apiConfig.connected || apiConfig.platform === 'demo') {
                return new Promise(resolve => setTimeout(resolve, 800));
            }
            
            // 实际应用中这里应该调用真实的API
            try {
                // 模拟API请求
                return new Promise(resolve => setTimeout(resolve, 800));
            } catch (error) {
                console.error('获取股票数据失败:', error);
                throw error;
            }
        }

        // 渲染股票列表
        function renderStockList(stocks) {
            const stockListEl = document.getElementById('stock-list');
            stockListEl.innerHTML = '';
            
            if (stocks.length === 0) {
                stockListEl.innerHTML = `
                    <div class="flex items-center justify-center h-24 text-gray-400">
                        <i class="fa fa-search-minus mr-2"></i> 没有找到匹配的股票
                    </div>
                `;
                return;
            }
            
            stocks.forEach(stock => {
                const stockItem = document.createElement('div');
                stockItem.className = 'bg-white rounded-xl p-4 card-shadow hover:shadow-lg transition-shadow cursor-pointer';
                stockItem.dataset.code = stock.code;
                
                // 计算价格与120日最低价格的关系
                const priceDiff = stock.price - (stock.minPrice120 - stock.minPrice120 * stock.concentration90);
                const diffPercent = ((priceDiff / stock.price) * 100).toFixed(2);
                
                stockItem.innerHTML = `
                    <div class="flex justify-between items-center">
                        <div>
                            <h3 class="font-semibold">${stock.name}</h3>
                            <p class="text-xs text-gray-500">${stock.code}</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <div class="text-right">
                                <p class="text-lg font-bold ${stock.change >= 0 ? 'text-danger' : 'text-secondary'}">${stock.price}</p>
                                <p class="text-xs ${stock.change >= 0 ?
